// import { Tag } from 'antd'
import { WorkflowRunningStatus } from '@/components/workflow/types'
import { Popover } from 'antd'
import { useEffect, useState } from 'react'
import RowResult from '../nodes/components/RunResult'
import './index.less'
import ResultStatus from './status'
const ResultColor = {
  [WorkflowRunningStatus.Verifying]: '#edf9ee',
  [WorkflowRunningStatus.Invalid]: '#fdf0e7',
  [WorkflowRunningStatus.Waiting]: '#edf9ee',
  [WorkflowRunningStatus.Running]: '#edf9ee',
  [WorkflowRunningStatus.Succeeded]: '#edf9ee',
  [WorkflowRunningStatus.Failed]: '#fdf0e7',
  [WorkflowRunningStatus.Stopped]: '#edf9ee'
}

const NodeResult = ({ runInfo, text = '' }: any) => {
  useEffect(() => {
    console.log('runInfo', runInfo)
  }, [runInfo])

  const [open, setOpen] = useState(false)

  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen)
  }

  const content = <RowResult runInfo={runInfo}></RowResult>
  return (
    <div className="custom-node-result" style={{ backgroundColor: ResultColor[runInfo.status] }}>
      <div className="flexRowStart items-center gap-[16px]">
        <ResultStatus type={runInfo.status} text={text} />
        <span>{runInfo?.endTime ? ((runInfo.endTime - runInfo.startTime) / 1000).toFixed(3) + 's' : ''}</span>
      </div>
      {/* 运行中 失败 不展示信息 */}
      {runInfo.status === 'succeeded' && (
        <Popover
          title="运行结果"
          placement="rightTop"
          trigger="click"
          open={open}
          onOpenChange={handleOpenChange}
          content={content}
          rootClassName="custom-node-result-popover"
        >
          <span
            className="nodrag nopan nowheel node-result-text-right"
            onClick={e => {
              e.preventDefault()
              e.stopPropagation()
            }}
          >
            展开结果
          </span>
        </Popover>
      )}
    </div>
  )
}

export default NodeResult
